import React from 'react';
import {View, Image} from 'react-native';
import { Lt, Color, NavTheme as Nav, Label, Button, Images, Fimage, Touch, Jpp, Dialog, Navigator, Jx, Rlist } from "../_utils";
import { Net } from "../_net"
import { eRole, cMe } from "./_me"
import { cTemp } from '../_util';

class TouchMe extends React.PureComponent{
    render(){
        const {source, title, ...other} = this.props;
        return <Touch {...other}>
            <View style={{alignItems:"center"}}>
                <Image source={source}/>
                <Label style={{fontSize:Lt.c16, color:Color.c3}}>{title}</Label>
            </View>
        </Touch>
    }
}
class ListMe extends React.PureComponent{
    render(){
        const {source, title, ...other} = this.props;
        return <Touch {...other} style={{paddingVertical:Lt.pad, marginVertical:5}}>
            <View  style={{width:"100%", flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                <View style={{flexDirection:"row", alignItems:"center"}}>
                    <Image source={source} style={{marginHorizontal:Lt.margin}}/>
                    <Label style={{fontSize:Lt.c16, color:Color.c3}}>{title}</Label>
                </View>
                <Image source={Images.you}/>
            </View>
        </Touch>
    }
}

// 我 个人中心
export class Me extends React.Component{
    constructor(props){
        super(props);

        const data = 
        this.state = {
            data : {
                image : "",
                myMoney : Jpp.questionMark,
            },
        }
        
        this.onFresh = this.onFresh.bind(this);
        this.onHead = this.onHead.bind(this);
        this.onAgent = this.onAgent.bind(this);
        this.onCash = this.onCash.bind(this);
        this.onOrder = this.onOrder.bind(this);
        this.onTeam = this.onTeam.bind(this);
        this.onReport = this.onReport.bind(this);
        this.onTutorial = this.onTutorial.bind(this);
        this.onSpread = this.onSpread.bind(this);
        this.onQuestion = this.onQuestion.bind(this);
        this.onFavorite = this.onFavorite.bind(this);
        this.onContact = this.onContact.bind(this);
    }
    static navigationOptions = {
        tabBarIcon : ({focused, tintColor})=><Image source={focused ? Images.WO_2 : Images.WO}/>
    }
    // 刷新
    onFresh(didMount, freshed){
        Net.request("member/me", null, {freshed}).then(r=>{
            if(r.data){
                cTemp.setRoleId(r.data.roleId);
                this.setState({data:cMe.toMe(r.data)})
            }
        });
    }
    // 头像
    onHead(){
        const { data } = this.state;
        Navigator.push("Info", {data});
    }
    onAgent(){
    }
    // 提现
    onCash(){
        Navigator.push("Cash");
    }
    // 我的订单
    onOrder(){
        const { data } = this.state;
        if(data.roleId === eRole.FANS){
            Dialog.toast(eRole.names[eRole.FANS] + "无订单")
            return;
        }
        Navigator.push("Order");
    }
    // 我的团队
    onTeam(){
        if(!this.isFansMsg()){
            const { data } = this.state;
            Navigator.push("Team", {data});
        }
    }
    // 收益报表
    onReport(){
        const { data } = this.state;
        Navigator.push("Profit", {data});
    }
    // 视频教程
    onTutorial(){
        Navigator.push("Tutorial");
    }
    // 推广赚钱
    onSpread(){
        if(!this.isFansMsg()){
            Navigator.push("Spread");
        }
    }
    // 常见问题
    onQuestion(){
        Navigator.push("Questions");
    }
    // 我的收藏
    onFavorite(){
        Navigator.push("Favorite");
    }
    // 联系我们
    onContact(){
        Navigator.push("Contact");
    }
    // 粉丝部分不能访问
    isFansMsg(){
        const { data } = this.state;
        return cMe.fansMsg(data.roleId, "推广赚钱/团队管理", this.props.navigation);
    }
    render(){
        const { data } = this.state;
        return <View style = {{flex:1, backgroundColor:Color.back}}>
            <Nav.StateBar/>
            <Rlist onFresh = {this.onFresh}>
                <View style={{backgroundColor:Color.theme, paddingVertical:20, alignItems:"center"}}>
                    <Touch onPress={this.onHead} style={{borderRadius:40}}>
                        <Fimage uri={data.image} style={{width:80, height:80, borderRadius:40}}/>
                    </Touch>
                    <Label style={{marginTop:Lt.margin, fontSize:Lt.c16, color:"white"}}>{data.name}</Label>
                    <Button.Border2 title={eRole.names[data.roleId]} onPress={this.onAgent} style={{marginTop:5, height:24, borderColor:"white", color:"white"}}/>
                </View><View style={{flex:1}}>
                <View style={{position:"absolute", width:"100%", height:80, backgroundColor:Color.theme}}/>
                <View style={{backgroundColor:"white", borderRadius:Lt.radiu2, marginHorizontal:Lt.margin}}>
                    <View style={{backgroundColor:Color.back, height:50, borderRadius:25, margin:Lt.margin, paddingHorizontal:Lt.pad, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                        <Label style={{fontSize:Lt.c16, color:Color.c3}}>
                            预估收入: <Label style={{fontSize:Lt.c16, color:Color.theme}}>{data.myMoney}</Label>
                        </Label>
                        <Button.Pure onPress={this.onCash} title={"提现"} style={{fontSize:Lt.c16}}/>
                    </View>
                    <View style = {{flexDirection:"row", justifyContent:"space-around", paddingVertical:20}}>
                        <TouchMe onPress={this.onOrder} source={Images.dingdan} title={"我的订单"}/>
                        <TouchMe onPress={this.onTeam} source={Images.tuandui} title={"我的团队"}/>
                        <TouchMe onPress={this.onReport} source={Images.baobiao} title={"收益报表"}/>
                    </View>
                </View>
                <View style={{backgroundColor:"white", borderRadius:Lt.radiu2, margin:Lt.margin, paddingHorizontal:20, paddingVertical:Lt.pad, flexShrink:1}}>
                    <ListMe onPress={this.onTutorial} source={Images.jiaocheng} title={Jpp.gameName + "教程"}/>
                    <ListMe onPress={this.onSpread} source={Images.tuiguang} title={"推广赚钱"}/>
                    <ListMe onPress={this.onQuestion} source={Images.wenti} title={"常见问题"}/>
                    <ListMe onPress={this.onFavorite} source={Images.shoucang} title={"我的收藏"}/>
                    <ListMe onPress={this.onContact} source={Images.lianxi} title={"联系我们"}/>
                </View><View style={{height:30}}/>      
            </View>
        </Rlist>
    </View>;
    }
}